/*
 * @Date: 2018-05-08 
 * 参考页面：报表中心——案场报表 
 */

<template>  
  <div class="conditionWarp">
    <div class="condition-show">
      <span>{{title}}</span><i class="ivu-icon ivu-icon-arrow-down-b ivu-select-arrow "></i>
    </div>
    <div class="condition-down" :style="width?'width:'+width:''">
      <div class="condition-down-items">
        <div  class="condition-down-overDiv productUl">
          <ul> 
            <li v-for="(litem,lindex) in list" :key="lindex">
              <label v-bind:class="{'checked': litem.checked }" :for="litem.name + lindex" :title="litem.name" @click.stop="handleChoose(litem)" >{{litem.title}}</label>
            </li>
          </ul>
        </div>
        <div class="condition-customize" v-show="showCustomize">
            <grid-timepicker 
            ref="gridTimePickerSign" 
            useHover         
            defaultCurTime
            @handleOk="handleTimeSign" 
            dataType="date"
            promptText="日期:" 
            promptNullText="请选择日期"
            width="260px"></grid-timepicker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'
import GridTimepicker from '@/components/grid_timepicker'

export default {
  name: 'cpFilter',
  data () {
    return {
      list:[{
        name: 'day',
        id: 1,
        title: '本日'
      },{
        name: 'week',
        id: 2,
        title: '本周'
      },{
        name: 'month',
        id: 3,
        title: '本月'
      },{
        name: 'year',
        id: 4,
        title: '本年'
      },{
        name: 'customize',
        id: 9,
        title: '自定义'
      }],
      showCustomize: false,
      startDate:'',
      endDate:'',
      curChecked:{}
    }
  },
  props: {
    width: { 
      type: String,
      default: '300px'
    },
    title: {
      type: String,
      default: '创建日期'
    },
    default: {
      type: Number,
      default: 2
    },
    hide: {
      type: Array,
      default: function(){
        return []
      }
    }
  },
  components: {
    GridTimepicker
  },
  methods:{
    init(){
     this.list =  this.list.filter((item,index)=>{     
        this.$set(item,'checked',false)
        if(item.id == this.default){
          item.checked = true
          this.curChecked = item
        }
        if(this.hide.indexOf(item.id)>-1) return false
        return true
      })
    },
    handleChoose(child) {
      this.list.map((item)=>{
        item.checked = false
      })
      child.checked = true
      this.showCustomize = false
      this.curChecked = child
      if(child.id == 9){
        this.showCustomize = true
      }
      this.handleChooseEmit();     
    },
    handleChooseEmit(){
      let startDate,endDate
      endDate = Helper.formatDate(new Date())
      if(this.curChecked.id == 9){
        startDate = this.startDate
        endDate = this.endDate
      }else{
        let date = Helper.getTypeDate(this.curChecked.name)
        startDate = date.start
        endDate = date.end
      }
      this.$emit('handleChoose',startDate,endDate)
    },
    // 选择签约日期
    handleTimeSign(startDate,endDate) {
      this.startDate = startDate;
      this.endDate = endDate;
      this.handleChooseEmit();    
    },
    warpClick() {}
  },
  created() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  @import "../../assets/sass/install";
  .conditionWarp{
    display: inline-block;
    height: 33px;
    color: #657180;
    position: relative;
    line-height: normal;
    .condition-show{
      display: block;
      height: 32px;
      line-height: 29px;
      padding-left: 8px;
      padding-right: 30px;
      box-sizing: border-box;
      outline: none;
      user-select: none;
      cursor: pointer;
      position: relative;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #d7dde4;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
      .condition-show-result{

      }
    }
    .condition-down{
      display: none;
      position: absolute;
      top: 33px;
      left: 0;
      @include transition(500ms);
      @include radius(3px);
      max-height: 480px;
      width: 630px;
      // overflow: auto;
      // overflow-x: hidden;
      /*margin: 5px 0;*/
      padding: 15px;
      padding-top: 5px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      .condition-down-items {
        margin-top: 15px;
        .condition-down-title {
          font-size: 16px;
          color: #8c8c8c;
          margin-left: 4px;
          margin-bottom: 5px;
        }
        .condition-down-overDiv{
          position: relative;
          .open{
            cursor: pointer;
            color: #02b0f0;
            font-size: 14px;
          }
        }
        ul {
          font-size: 0;
          overflow: hidden;
          li {
            font-size: 14px;
            margin-right: 6px;
            margin-bottom: 6px;
            display: inline-block;
            vertical-align: top;
            background-color: #f5f5f5;
            color: #2b3545;
            height: 32px;
            line-height: 32px;
            width: 80px;
            text-align: center;
            @include radius(3px);
            overflow: hidden;
            position: relative;
            label {
              display: block;
              padding: 0 10px;
              cursor: pointer;
              @include transition(500ms);
              max-width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.checked{
                color: #fff;
                background-color: #02b0f0;
                &:hover {
                  color: #fff;
                }
              }
            }
            .lable{
              &:hover{
                color: #02b0f0;
              }
            }
            .curlable{
              color: #fff;
              background-color: #02b0f0;
            }
            .condition-down-checkbox {
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0;
              visibility: hidden;
              &:checked+label {
                color: #fff;
                background-color: #02b0f0;
                &:hover {
                  color: #fff;
                }
              }
              &:hover+label {
                color: #02b0f0;
              }
            }
            .cur {
              color: #02b0f0;
            }
          }
        }
      }
    }
    &:hover{
      .condition-down{
        display: inline-block;
      }
      .ivu-select-arrow{
        @include rotate(180deg)
      }
      .condition-show{
        border-color: #35c0f3;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(2,176,240,.2);
      }
    }
    .condition-customize{
      position:relative;
      padding-top:10px;
      width:260px;
    }
  }
</style>
